<template>
	<view class="w100p common_wrap">
		<CommonHeader ref="headerTab" title="" color="#262728" :is-right="true" @topTab="getTopTab">
		</CommonHeader>

		<!-- 		<view class="w100p common_search" @click="goSearch"> -->
		<view class="w100p common_search" >
			<!-- <view class="flex-box w100p search_wrap">
				<uni-icons type="search" size="36rpx" color="#262728"></uni-icons>
				<text class="flex-item text">{{ $t('搜索') }}</text>
			</view> -->
			<view v-if="topTab == 1" :class="langR == 'zh'?'tabContBox':'r_tabContBox tabContBox'">
				<view class="tabCont" :class="{'tabOn':tabOnsBuy==1}" @click="onTabsBuy(1)">
					{{$t('已购买')}}					
					<span></span>
				</view>
				<view class="tabCont" :class="{'tabOn':tabOnsBuy==2}" @click="onTabsBuy(2)">
					{{$t('已付款')}}
					<span ></span>
				</view>
				<view class="tabCont" :class="{'tabOn':tabOnsBuy==3}" @click="onTabsBuy(3)">
					{{$t('进行中')}}
					<span></span>
				</view>
				<view class="tabCont" :class="{'tabOn':tabOnsBuy==4}" @click="onTabsBuy(4)">
					{{$t('已完成')}}
					<span></span>
				</view>
				<view class="tabCont" :class="{'tabOn':tabOnsBuy==5}" @click="onTabsBuy(5)">
					{{$t('申请售后')}}
					<span></span>
				</view>
			</view>
			<view v-if="topTab == 2" :class="langR == 'zh'?'tabContBox':'r_tabContBox tabContBox'">
				<view class="tabCont" :class="{'tabOn':tabOns==1}" @click="onTabs(1)">
					{{$t('已出售')}}					
					<span></span>
				</view>
				<view class="tabCont" :class="{'tabOn':tabOns==2}" @click="onTabs(2)">
					{{$t('已付款')}}
					<span ></span>
				</view>
				<view class="tabCont" :class="{'tabOn':tabOns==3}" @click="onTabs(3)">
					{{$t('物流信息')}}
					<span></span>
				</view>
				<view class="tabCont" :class="{'tabOn':tabOns==4}" @click="onTabs(4)">
					{{$t('已完成')}}
					<span></span>
				</view>
				<view class="tabCont" :class="{'tabOn':tabOns==5}" @click="onTabs(5)">
					{{$t('售后')}}
					<span></span>
				</view>
			</view>
		</view>
		<view class="w100p pr list_block">
			<scroll-view :scroll-top="0" scroll-y="true" class="w100p scroll-Y"
				@scrolltolower="lower" @touchmove.stop>
				<view style="height: 20rpx;"></view>
				<!-- 列表 -->
				<view v-if="topTab == 1" class="list-wrapper ">
					<view class="list" v-for="(item, index) in myBuyList" :key="index">
						<!-- 基础信息 -->
						<view @click="onGoDetailBuy(1, item)" class="">
							<view class="base-info">
								<view class="flex-start" style="align-items: center;">
									<!-- <image :src="getImageUrl(item.avatar)" mode="aspectFill" class="w-55 h-55"></image> -->
									<image :src="getImageUrl(item.avatar)"  mode="aspectFill" class="w-55 h-55"></image>
									<flag class="w-30 h-20 mr-4 ml-15" :country="item.country" />
									<span class="ml-12" style="max-width: 550rpx;">{{item[plang('username')]}}</span>
									<!-- <image src="../../../static/icon/professIcon (2).png" mode="aspectFill" class="w-110 h-30 ml-12"></image> -->
									<!-- <span class="user-sty">采购商</span> -->
								</view>
								<span v-if="tabOnsBuy == 1" class="fz20" style="color: #FF6A00;">{{$t('待付款')}}</span>
								<span v-if="tabOnsBuy == 2" class="fz20" style="color: #8C8C8C;">{{$t('已付款')}}</span>
								<span v-if="tabOnsBuy == 3" class="fz20" style="color: #FF6A00;">{{$t('待收货')}}</span>
								<span v-if="tabOnsBuy == 4 && item.status == 6" class="fz20" style="color: #8C8C8C;">GLUZ{{$t('已付款')}}</span>
								<span v-if="tabOnsBuy == 4 && item.status != 6" class="fz20" style="color: #8C8C8C;">{{$t('已完成')}}</span>
								<span v-if="tabOnsBuy == 5" class="fz20" style="color: #FF0000;text-align: right;">{{$t('售后')}}中</span>
							</view>
							<view class="centerCont">
								<view class="flex" style="max-width: 72%;">
									<view class="leftCont">
										<image class="pic" :src="getImageUrl(item.product_img_urls.split(',')[0])" mode="aspectFill" />
									</view>
									<view class="cenCont ml-10">
										<!-- {{ item[plang('product_name')] }} -->
										<view class="fz24 text-010 font-bold cenContTop">
											{{ item[plang('product_name')] }}
										</view>
										<view class="fz20 text-888">
											{{ item[plang('category_name')] }}
										</view>
									</view>
								</view>
							
							<view class="rightCont ml-35">
								<!-- item.price -->
								<view class="fz26 text-010 font-bold" style="text-align: right;">
									{{item.currency}} {{ item.price }}
								</view>
								<view class="fz20 text-888" style="text-align: right;">
									{{$t('共')}}{{item.amount}}{{ $t('件') }}
								</view>
							</view> 
						</view>
						</view>
						<view class="bottomCont">
							<view class="text-888 fz24">{{$t('订单编号：')}}{{item.order_number}}</view>
							<view v-if="tabOnsBuy == 3" class="getorder" @click="goYunZong(item.yuntrace_id,item)">{{$t('查看运踪')}}</view>
							<view v-else-if="tabOnsBuy == 4" class="">
								<view v-if="item.pu_comment == null" class="getorder" @click="goService(item)">{{$t('去评价')}}</view>
								<p v-else class="fz24 font-bold" style="color: #FF6A00;">{{$t('已评价')}}</p>
							</view>
							
							<view v-else class="getInfo" @click="onGoDetailBuy(2, item)">{{$t('查看详情')}}</view>
						</view>
					</view>
				</view> 
				<view v-else-if="topTab == 2" class="list-wrapper ">
					<view class="list" v-for="(item, index) in mySealList" :key="index">
						<!-- 基础信息 -->
						<view @click="onGoDetail(1, item)" class="">
							<view class="base-info">
								<view class="flex-start" style="align-items: center;">
									<image :src="getImageUrl(item.avatar)" mode="aspectFill" class="w-55 h-55"></image>
									<!-- <image src="../../../static/img/ico_logo1.png"  mode="aspectFill" class="w-55 h-55"></image> -->
									<flag class="w-30 h-20 mr-4 ml-15" :country="0" />
									<span class="ml-12" style="max-width: 550rpx;">{{item[plang('username')]}}</span>
									<!-- <image src="../../../static/icon/professIcon (2).png" mode="aspectFill" class="w-110 h-30 ml-12"></image> -->
									<!-- <span class="user-sty">采购商</span> -->
								</view>
								<span v-if="tabOns == 1" class="fz20" :style="langR == 'zh'?'color: #FF6A00;':'color: #FF6A00;'">{{$t('付款中')}}</span>
								<span v-if="tabOns == 2" class="fz20" style="color: #8C8C8C;">{{$t('已付款')}}</span>
								<span v-if="tabOns == 3" class="fz20" style="color: #8C8C8C;">{{$t('待收货')}}</span>
								<span v-if="tabOns == 4 && item.status == 6" class="fz20" style="color: #8C8C8C;">GLUZ{{$t('已付款')}}</span>
								<span v-if="tabOns == 4 && item.status != 6" class="fz20" style="color: #8C8C8C;">{{$t('已完成')}}</span>
								<span v-if="tabOns == 5" class="fz20" style="color: #FF0000;text-align: right">{{$t('售后中')}}</span>
							</view>
							<view class="centerCont">
								<view class="flex" style="max-width: 72%;">
									<view class="leftCont">
										<image class="pic" :src="getImageUrl(item.product_img_urls.split(',')[0])" mode="aspectFill" />
									</view>
									<view class="cenCont ml-10">
										<!-- {{item[plang('product_name')]}} -->
										<view class="fz24 text-010 font-bold cenContTop">
											{{item[plang('product_name')]}}
										</view>
										<view class="fz20 text-888">
											{{item[plang('category_name')]}}
										</view>
									</view>
								</view>
								<view class="rightCont ml-35">
									<view class="fz26 text-010 font-bold" style="text-align: right;">
										{{item.currency}} {{ item.price }}
									</view>
									<view class="fz20 text-888" style="text-align: right;">
										{{$t('共')}}{{item.amount}}{{$t('件')}}
									</view>
								</view>
							</view>
						</view>
						<view class="bottomCont">
							<view class="text-888 fz24">{{$t('订单编号：')}}{{item.order_number}}</view>
							<view v-if="tabOns == 3" class="getorder" @click="goYunZong(item.yuntrace_id,item)">{{$t('查看运踪')}}</view>
							<view v-else class="getInfo" @click="onGoDetail(2, item)">{{$t('查看详情')}}</view>
						</view>
					</view>
				</view>

			</scroll-view>
		</view>
	
		<div v-if="nomore" class="center text-gray-500 fz24 pt-20 pb-20">{{$t('没有更多了')}}</div>
		<view class="h-50"></view>
	</view>
</template>

<script>

import CommonHeader from "@/pages/components/common-headerOver.vue";
import { purchaseList, sellList } from '@/api/caigoOrder.js'
// import vipImg1 from '@/static/detail/vip_1.png';
// import vipImg2 from '@/static/detail/vip_2.png';
// import vipImg3 from '@/static/detail/vip_3.png';
// import vipImg4 from '@/static/detail/vip_4.png';
import { getOrderDetail } from '@/api/freight.js';	
import {
	mapState
} from 'vuex';
export default {
	components: {
		CommonHeader
	},
	computed: {
		// 使用mapState生成计算属性
		...mapState({
			lang: state => state.commonData.lang,
		})
	},
	watch: {
		lang(newValue, oldValue) {
		},
	},
	data() {
		return {
			categoryList: [],

			tabList: [{
				title: this.$t('采购寻单'),
				count: 0,
			}, {
				title: this.$t('我发布的'),
				count: 2,
			}, {
				title: this.$t('我参与的'),
				count: 1,
			}],
			currentTapIndex: 0,
			IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
			statusBarHeight: uni.getStorageSync('statusBarHeight') || 0,
			tabOns:1,
			topTab: 1,
			tabOnsBuy: 1,
			nomore: false,
			myBuyList: [],
			mySealList: [],
			paramsList: {
				page: 1,
				limit: 10,
				user_id: uni.getStorageSync('user_id'),
				status: 1
			},
			paramsSealList: {
				page: 1,
				limit: 10,
				user_id: uni.getStorageSync('user_id'),
				status: 1
			}
		}
	},
	onLoad(options) {
		if (options.type) {
			this.topTab = options.type
			this.$nextTick(() => {
			    if (this.$refs.headerTab) {
			      this.$refs.headerTab.tabOns(options.type);
			    }
			  })
		}
		if (options.status) {
			if (options.type == 1) {
				this.tabOnsBuy = options.status
				this.paramsList.status = options.status
				this.getPurchaseList(true)
			} else {
				this.tabOns = options.status
				this.paramsSealList.status = options.status
				this.sellList(true)
			}
 			
		}

		window.onNativeShow = ()=>{
			if(this.topTab == 1){
				this.getPurchaseList(true)
			} else {
				this.sellList(true)
			}
		}
	},

	mounted() {
		this.$nextTick(async () => {
			try {
				const {
					data
				} = await this.$u.api.shopping.getCategory({});
				this.categoryList = data;
				if (!!data?.length) {
					this.firstCategory(data[0].id);
				} else {
					this.subCategoryList = [{
						name: this.lang == 'zh' ? this.$t('全部') : 'Все',
					}]
					this.thrCategoryList = [];
				}
			} catch (e) { }
		}),
		this.getPurchaseList(true)
	},
	methods: {
		//下拉刷新
		onPullDownRefresh() {
			if(this.topTab == 1) {
				this.getPurchaseList(true)
			} else {
				this.sellList(true)
			}
		},
		//上拉加载
		onReachBottom() {
			if(this.topTab == 1) {
				this.paramsList.page++
				this.getPurchaseList()
			} else {
				this.paramsSealList.page++
				this.sellList()
			}
			
		},
		async goYunZong(yuntrace_id,item) {
			const res = await getOrderDetail({
				delivery_id: yuntrace_id
			})
			let data = res.data.data.data.status;
			if (data >= 3){
				// mailing_type 1是自提 2是商家发货
				uni.navigateTo({
					url: "/pages/orderDynamics/orderDynamics?id=" + yuntrace_id + '&type=' + (this.topTab == 1 ? 'buy' : 'sell') + '&mailing_type=' + item.mailing_type,
					webview: 'zWebView',
					success: () => {
					}
				});
			} else {
				uni.showToast({
					title: this.$t('运踪还没开启请等待'),
					icon: 'none',
				})
			}
		
		},
		sellList(init) {
			if (init) {
				this.paramsSealList.page = 1
				this.nomore = false;
			}
			sellList(this.paramsSealList).then(res => {
				if (this.paramsSealList.page == 1) {
					this.mySealList = res.data.data
				} else {
					this.mySealList = [...this.mySealList, ...res.data.data]
				}
				//当前请求的{{$t('列表')}}{{$t('是')}}空的 那就{{$t('是')}}没有更多了
				if (res.data.data.length == 0 || res.data.data.length < 10) {
					this.nomore = true;
				}
				// 结束下拉刷新
				uni.stopPullDownRefresh()
			})
		},
		getPurchaseList(init) {
			if (init) {
				this.paramsList.page = 1
				this.nomore = false;
			}
			purchaseList(this.paramsList).then(res => {
				if (this.paramsList.page == 1) {
					this.myBuyList = res.data.data
				} else {
					this.myBuyList = [...this.myBuyList, ...res.data.data]
				}
				//当前请求的{{$t('列表')}}{{$t('是')}}空的 那就{{$t('是')}}没有更多了
				if (res.data.data.length == 0 || res.data.data.length < 10) {
					this.nomore = true;
				}
				// 结束下拉刷新
				uni.stopPullDownRefresh()
			})
		},
		//{{$t('切换')}}{{$t('订单')}}状态筛选
		onTabs(i){
			this.tabOns=i
			this.paramsSealList.status = i
			this.sellList(true)
		},
		onTabsBuy(i) {
			this.tabOnsBuy=i
			this.paramsList.status = i
			this.getPurchaseList(true)
		},
		//获取顶部{{$t('切换')}}
		getTopTab(e){
			this.topTab = e
			if (e == 2) {
				this.sellList(true)
			} else {
				this.getPurchaseList(true)
			}
		},
		isRefresher() {

		},
		scrollTop() {

		},
		onGoDetail(key, item) {
			// if(this.tabOns == 5 && key == 2){
			// 	uni.navigateTo({
			// 		url: `/pages/caigou/orderDetail/index?status=${this.tabOns}&saleFlag=true`,
			// 	})
			// } else {
			// 	// 我卖的取id
			// 	uni.navigateTo({
			// 		url: `/pages/caigou/orderDetail/index?status=${this.tabOns}&id=${item.id}`,
			// 	})	
			// }
			uni.navigateTo({
				url: `/pages/caigou/orderDetail/index?status=${this.tabOns}&id=${item.id}`,
			})	
			
		},
		onGoDetailBuy(key, item) {
			if(this.tabOnsBuy == 5 && key == 2) {
				uni.navigateTo({
					// url: `/pages/caigou/orderDetail/buySaleInfo?order_id=${item.order_id}`,
					url: `/pages/caigou/reasonAfterSale?order_id=${item.order_id}`
				})
			} else {
				// 我买的取order_id
				uni.navigateTo({
					url: `/pages/caigou/orderDetail/buyDetail?status=${this.tabOnsBuy}&order_id=${item.order_id}`,
				})	
			}
			
		},
		goService(item) {
			uni.navigateTo({
				url: `/pages/caigou/serviceEval?order_id=${item.order_id}`,
			})	
			
		},
		onTab(index) {
			this.currentTapIndex = index;
		},
		getWidth() {
			let arr = ['40rpx', '56rpx', 'auto']
			return arr[2];
		},
		// 跳转{{$t('搜索')}}页
		goSearch() {
			uni.navigateTo({
				url: '/pages/caigou/search/index'
			})
		},



		// 触底加载
		lower() {

		},
		// 下拉刷新触发
		fresh() {

		},
		// 下拉刷新复位
		store() {
		},
		// 获取{{$t('列表')}}
		async getData() {

		},
	}
}
</script>

<style scoped lang="scss">
	@import './index.scss';
	@import '@/assets/appScss.scss';
	page {
		background-color: #F6F7FB;
	}
	.user-sty {
		background-image: url('../../../static/userLogoBg.png');
		background-size: 100% 100%;
		margin-left: 12rpx;
		min-width: 120rpx;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		font-size: 20rpx;
		line-height: 30rpx;
		box-shadow: 0rpx 1.25rpx 0.75rpx 0rpx #D061024D;
		color: #FFFFFF;
		text-align: center;
		padding-left: 26rpx;
	}
	.r_tabContBox {
		.tabCont{
			padding: 0 8rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

	}

	.tabCont {
		text-align: center;
	}
</style>
